<template>
  <div>
     h1
  </div>
</template>
 h1
<script>
export default {
  data() {
    return {
      arr: []

    };
  },
  // async created() {
  //   //1.发送网络请求
  //   console.log(this);
  //   var result = await this.$http({
  //     url: "/api/getgoodlist",
  //     params: {
  //       cateid: 2,
  //       page: 1,
  //       size: 6,
  //       type: 1,
  //     },
  //   });
  //   console.log(result.data.list.goodData, "result");
  //   this.arr = result.data.list.goodData;
  // },
  created() {
    this.getlist();
    window.addEventListener("scroll", () => {
      var clientHeight = document.documentElement.clientHeight;
      var scrollHeight = document.documentElement.scrollHeight;
      var scrllTop = document.documentElement.scrollTop;
      if (clientHeight + scrllTop >= scrollHeight) {
        console.log("触底了");
        this.getlist();
      }
    });
  },
  methods: {
    async getlist() {
      //1.发送网络请求
      console.log(this);
      var result = await this.$http({
        url: "/api/getgoodlist",
        params: {
          cateid: 3,
          page: 1,
          size: 6,
          type: 1
        }
      });
      // console.log(result.data.list.goodData, "result");
      this.arr = [...this.arr, ...result.data.list.goodData];
      console.log(this.arr, "this.arr");
         
         /**
          * 触底设置布尔值 
          * 根据数组长度判断 
          *当他符合条件的时候就关门
          *二次触底了门关上了就不访问了
          */
        
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  background-color: aqua;
  padding: 20px;
}
.box {
  width: 100%;
  background-color: blue;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.box {
  width: 100%;
  background-color: blue;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
// .img-box img {
//   width: 60px;
//   height: 60px;

// }
// ul {
//   width: 700px;
//   // background: wheat;
//   list-style: none;
//   display: flex;
//   flex-wrap: wrap;
//   li {
//     width: 300px;
//     height: 200px;
//     border: 1px solid #444;
//     display: flex;
//     justify-content: space-around;
//     img {
//       width: 150px;
//       height: 150px;
//     }
//   }
// }
</style>